<!-- 待办任务-来料委外质检-查看记录组件 -->
<script lang="ts">
import { reactive, nextTick, watch } from "vue";
import { qiTaskOutRecordId } from "/@/api/quality/mission";
import { errorMessage } from "/@/utils/message";
import imgViewer from "/@/components/imgViewer/index.vue";
export default {
  name: "outsourceDetail",
  components: { imgViewer },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    qiTaskId: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    const testData = reactive({
      submitLoading: false,
      dialogShow: false,
      qiTaskId: 0,
      formData: {} as any //表单数据
    });
    watch(props, n => {
      testData.dialogShow = n.dialogShow;
      if (testData.dialogShow) {
        testData.qiTaskId = n.qiTaskId;
        testingEvent();
      }
    });
    // 查看记录点击事件
    const testingEvent = () => {
      //qiType == 2来料
      //qiType == 3委外
      // 通过id查质检记录详情
      qiTaskOutRecordId(testData.qiTaskId)
        .then((res: any) => {
          if (res.code === 0) {
            testData.formData = res.data;
          } else {
            errorMessage(res.message);
          }
        })
        .catch((err: any) => {
          console.log(err);
          errorMessage("查询失败");
        });
    };
    // 取消
    const outsourceClose = () => {
      testData.qiTaskId = 0;
      testData.formData = {} as any; //表单数据
      nextTick(() => {
        testData.dialogShow = false;
      });
      ctx.emit("outsourceDetailClose");
    };
    return {
      testData,
      outsourceClose
    };
  }
};
</script>
<template>
  <div>
    <!-- 来料委外质检-查看记录弹框 -->
    <el-dialog
      v-model="testData.dialogShow"
      title="查看记录"
      width="80%"
      top="7vh"
      :loading="testData.submitLoading"
      :before-close="outsourceClose"
      :close-on-click-modal="false"
    >
      <el-form
        id="dialogForm"
        ref="insertForm"
        :model="testData.formData"
        label-align="right"
        label-width="100px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="qiType" label="质检单类型">
              <el-tag
                type="success"
                v-if="testData.formData.qiType == 2"
                effect="dark"
                >来料</el-tag
              >
              <el-tag
                type="warning"
                v-if="testData.formData.qiType == 3"
                effect="dark"
                >委外</el-tag
              >
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="销售单号">
              {{ testData.formData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="custName" label="供应商名称">
              {{ testData.formData.custName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="生产订单编号">
              {{ testData.formData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bomCode" label="料号">
              {{ testData.formData.bomCode }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bomName" label="品名">
              {{ testData.formData.bomName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="checkQuantity" label="报检数量">
              {{ testData.formData.checkQuantity }}
            </el-form-item>
          </el-col>
          <el-col :span="16"> </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="qualityStatus" label="质检状态">
              <el-tag effect="dark">
                {{ testData.formData.qualityStatus == 1 ? "合格" : "不合格" }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="qualityNum" label="合格数">
              {{ testData.formData.qualityNum }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="qualityUnNum" label="不合格数">
              {{ testData.formData.qualityUnNum }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">实物照片</el-divider>
      <img-viewer
        :list="testData.formData.qualityRecordFiles"
        :disabled="true"
      ></img-viewer>
      <el-divider content-position="left">检查信息</el-divider>
      <img-viewer
        :list="testData.formData.qualityFiles"
        :disabled="true"
      ></img-viewer>
      <el-table
        stripe
        :data="testData.formData.qiTaskCustSxes"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          label="检查项目"
          prop="name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="技术要求"
          min-width="200"
          prop="standard"
        ></el-table-column>
        <el-table-column
          label="特殊性"
          prop="specificity"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="测量工具"
          prop="measureTools"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="自检结果"
          prop="qiRemark"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="专检结果"
          min-width="200"
          prop="recordValue"
        ></el-table-column>
      </el-table>
      <!-- <el-divider content-position="left">不良内容</el-divider>
      <el-table
        stripe
        :data="testData.formData.qiBadContentReds"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="分类" prop="badType" width="140">
        </el-table-column>
        <el-table-column label="不良内容" prop="badContent" width="140">
        </el-table-column>
        <el-table-column label="记录结果" prop="badContentRecord">
          <template #default="scope">
            <el-input
              style="width: 100%"
             
              placeholder="请输入"
              v-model="scope.row.badContentRecord"
            ></el-input>
          </template>
        </el-table-column>
      </el-table> -->
      <template #footer>
        <el-button size="mini" @click="outsourceClose">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
